<script setup>
import { Edit, Delete } from '@element-plus/icons-vue'
import { onMounted, ref, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
import { useTokenStore } from '../../stores/token'
import { ElMessage,ElMessageBox, } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { UploadFilled } from '@element-plus/icons-vue'

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import { useUserInfoStore } from '../../stores/userInfo'
import { computed } from 'vue'
import { getByIdAssignmentService } from '../../api/assignment'

import { addAssignmentService } from '../../api/assSubmit'
const route = useRoute();
const userInfoStore = useUserInfoStore()
let data = userInfoStore.userInfo
const userInfo = ref({
  ...data,
})

const assignments = ref({
    overdue: 0,
    isScore:0,
})

//用户搜索时选中的分类id
const courseId = ref('')

//用户搜索时选中的发布状态
const state = ref('')
const uploadRef = ref(null);

//添加表单数据模型
const assignmentModel = ref({
  id: '',
  title: '',
  state: '',
  info: '',
  file:'',
})

// 显示课程分类和作业
const getCourse = async () => {
    const assIdValue = computed(() => route.query.assId);
    const assId = assIdValue.value;
    const assignmentData = await getByIdAssignmentService(assId); // 获取作业信息
    assignments.value = assignmentData.data;
}

//上传作业
const submitAssignment = async () => { 
  assignmentModel.value.stuId =userInfoStore.userInfo.id
  //学生id
  const assIdValue = computed(() => route.query.assId);
  const assId = assIdValue.value;
  assignmentModel.value.assId = assId
  let res = await addAssignmentService(assignmentModel.value)
  if (res) {
    ElMessage.success(res.message ? res.message : '添加成功')
  } else {
    ElMessage.error(res.message ? res.message : '很可惜，添加失败了')
  }
}
const handleSuccess = (response, file) => {
    console.log('文件上传成功:', response);
    if (response) {
        assignmentModel.value.file = response; // 将文件路径存入 assignmentModel
    }
}

const handleError = (err, file) => {
    console.error('文件上传失败:', err);
}
const handleRemove = (file, fileList) => {
    console.log('文件移除:', file);
    assignmentModel.value.file = ''; // 清除文件路径
    ElMessage.success('文件已成功移除');
}
const NoSubmit = () => {
  ElMessageBox.confirm('本次作业的提交截止时间已过，无法成功提交作业。根据进度要求完成任务！', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  });
} 
//返回上一页
const goBack = () => {
  window.history.go(-1)
}

// 刷新时加载
onMounted(() => {
  getCourse()
})
</script>
<template>
  
  <el-card class="page-container" >
    <!-- 卡牌标题 -->
    <template #header>
        <el-page-header @back="goBack">
          <template #content>
            <span>{{ assignments.title }}</span>
          </template>
        </el-page-header>  
    </template> 
    <!-- 作业列表 -->
    <div style="height: 100px;">
     <el-steps :space="200" :active="assignments.isScore" finish-status="success" align-center>
        <el-step title="提交作业" :description="assignments.dueDate" :icon="Edit"></el-step>
        <el-step title="作业互评阶段" :description="assignments.updatedAt"></el-step>
        <el-step title="成绩公布" :description="assignments.dueDate"></el-step>
      </el-steps>
    </div>
    <el-container v-if="assignments.overdue!==0">
    <el-main>温馨提示：
        <p>本次作业的提交截止时间已过，无法成功提交作业。根据进度要求完成任务！</p>
    </el-main>
    </el-container>
    <el-form :data="assignments" label-width="100px">
      <el-form-item label="作业标题">
        <el-input v-model="assignments.title" style="width: 220px; " disabled></el-input>（100分）
      </el-form-item>
      <el-form-item label="要求">
        {{assignments.description}}
      </el-form-item>
      <el-form-item label="">
        <el-input type="textarea"
        :rows="3" v-model="assignmentModel.info" placeholder="请输入内容" style="width: 320px;"></el-input>
      </el-form-item>
      <el-form-item label="上传文件">
        <el-upload
          ref="uploadRef"
          :auto-upload="true"
          class="upload-demo"
          drag
          action="/api/fileTwo/uploadceshi"
          :headers="{ 'Authorization': `${useTokenStore().token}` }"
          @success="handleSuccess"
          @error="handleError"
          @on-remove="handleRemove"
          :limit = "1"
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text" style="width: 200px;">
           拖 拽 上 传 <em>点 击 选 择</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              jpg/png 文件不能超过 500kb
            </div>
          </template>
        </el-upload>
      </el-form-item>
      <input type="checkbox"><span style="color: #8d938d;font-size: 13px;">依照学术诚信条款，我保证此回答为本人原创，所有回答中引用的外部材料已经做了出处标记。</span>
      <p></p>
      <el-form-item >
        <el-button v-if="assignments.overdue==0" type="primary" @click="submitAssignment()">提交作业</el-button>
        <el-button v-else type="danger" @click="NoSubmit">提交作业</el-button>
      </el-form-item>
    </el-form>
    </el-card>  
</template>
<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.avatar-uploader {
  :deep() {
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }

    .el-upload:hover {
      border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  }
}
.editor {
  width: 100%;
  :deep(.ql-editor) {
    min-height: 200px;
  }
}
.el-container{
    width: 620px;
    margin-bottom: 20px;
    font-size: 12px;
    color:red;
    background-color: bisque;
    .el-main{
        height: 80px;
        padding: 2px;
        padding-left: 20px;
    }
}
</style>
